<template>
  <view class="pageShow">
    <view class="list-group" v-for="(item, gindex) in listData" :key="gindex">
      <view class="list-items" @click="changeDept(item)">
        <view class="items-box">
          <view class="items-body">
            <text
              :class="['list-title-text', currDeptId == item.deptId ? 'font-bold' : '']"
              :style="{
                'white-space': 'nowrap',
                color: currDeptId == item.deptId ? 'var(--kui-color-theme)' : 'grey',
                'text-overflow': 'ellipsis',
                overflow: 'hidden',
              }"
              >{{ item.txt }}</text
            >
          </view>
          <view class="list-arrow-right paddingR25">
            <u-icon v-if="currDeptId == item.deptId" name="checkbox-mark" color="var(--kui-color-theme)" bold></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

// 数据部分
const listData = reactive([]);
const currDept = computed(() => store.getters.currdeptInfo);

// onLoad 生命周期在 uni-app 中是页面加载时触发，但 Vue 3 并没有 onLoad，因此这里使用 onMounted 模拟
onMounted(() => {
  const { dept } = store.getters.userInfo;
  const depts = dept.map((v) => ({
    path: "",
    txt: v.deptName,
    deptId: v.id,
  }));
  listData.splice(0, listData.length, ...depts);
});

// 计算属性
const currDeptId = computed(() => {
  const deptId = currDept.value?.deptId;
  return deptId || false;
});

// 方法
const changeDept = async (item: { deptId: string }) => {
  try {
    uni.showLoading({
      title: "切换中",
    });
    const { id } = store.getters.roleInfo;
    await store.dispatch("user/refreshToken", { roleId: id, deptId: item.deptId });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: "切换失败",
      icon: "none",
    });
  }
};

</script>
<style>
.pageShow {
  width: 100%;
  height: 100%;
  padding-top: 10px;
}

.list-items {
  /* background-color: #ffffff; */
  .border-b {
    border-bottom: #efefef 1px solid;
  }
}

.items-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0rpx 25rpx;
}

.items-body {
  padding: 25rpx;
  display: flex;
  flex-direction: row;
}

.list-group {
  margin: 20rpx 10px;
  border-radius: 10px;
  overflow: hidden;
}

.list-group {
  margin: 20rpx 10px;
  border-radius: 10px;
  overflow: hidden;
}
</style>
